<template>
  <div class="shangpinguanli">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div
          style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;"
          class="flexbc"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <!-- <div class="flexc" style="background: #fff; width: 790px; height: 50px; background: rgb(255, 255, 255); border-radius: 25px; padding: 15px 20px;">
            <div style="margin-right: 15px;"><img src="../../../static/img/index2.png" style="width: 18px;"></div>
            <div>开发中.</div>
          </div>-->
          <!-- <div>
            <img src="../../../static/img/guanggao.jpg" @click="log = true" style="cursor: pointer;">
          </div>-->
          <div class="flexbc">
            <div
              class="flexc"
              style="background: #fff; background: rgb(255, 255, 255); border-radius: 25px; padding: 25px 20px; margin-top: 40px; width: 480px;"
            >
              <div>
                <img src="../../../static/img/shouye2.png" style="width: 50px;" />
              </div>
              <div style="margin-left: 50px;">
                <el-button type="primary" plain round @click="go2('/weixiaodian')">编辑微小店</el-button>
              </div>
              <div style="margin-left: 20px;">
                <el-button type="primary" round @click="openw2()">进入微小店</el-button>
              </div>
            </div>
            <div>
              <div
                style="width: 100px; height: 100px; background: rgb(255, 255, 255);border-radius: 20px; margin-left: 20px; cursor: pointer;"
                class="flexcc"
                @click="xiazaiapp()"
                v-if="sys.app_url"
              >
                <div>
                  <div class="flexcc">
                    <img
                      src="https://file.91haoka.cn/xiaoluohao/xiaoluohaoapp2.png"
                      style="width: 24px; margin-bottom: 16px;"
                    />
                  </div>
                  <div>下载APP</div>
                </div>
              </div>
            </div>
          </div>

          <div
            style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700; margin-top: 40px;"
            class="flex"
          >
            <div>
              <img src="../../../static/img/index1.png" style="width: 22px; margin-right: 10px;" />
            </div>
            <div>实时数据</div>
          </div>
          <div class="flex">
            <div
              style="width: 295px; height: 160px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 15px; margin-bottom: 15px;"
            >
              <div style="color: rgb(120, 125, 133); font-size: 16px;">提交订单</div>
              <div class="flexbc" style="margin: 10px 0;">
                <div class="flex">
                  <div style="font-size: 40px; margin-right: 10px;">{{all.allCount.count}}</div>
                  <div style="position: relative; top: 15px;">
                    <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                    <div style="color: rgb(252, 30, 53); font-size: 14px;">+{{all.allCount.inc}}</div>
                  </div>
                </div>
                <div>
                  <img src="../../../static/img/index10.png" style="width: 60px;" />
                </div>
              </div>
              <!-- <div style="color: rgb(64, 66, 71);">分销商<span style="margin-left: 10px;">{{all.allCount.inc}}</span></div> -->
            </div>
            <div
              style="width: 295px; height: 160px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 15px; margin-bottom: 15px;"
            >
              <div style="color: rgb(120, 125, 133); font-size: 16px;">审核通过</div>
              <div class="flexbc" style="margin: 10px 0;">
                <div class="flex">
                  <div style="font-size: 40px; margin-right: 20px;">{{all.passCount.count}}</div>
                  <div style="position: relative; top: 15px;">
                    <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                    <div style="color: rgb(252, 30, 53); font-size: 14px;">+{{all.passCount.inc}}</div>
                  </div>
                </div>
                <div>
                  <img src="../../../static/img/index9.png" style="width: 60px;" />
                </div>
              </div>
              <!-- <div style="color: rgb(64, 66, 71);">分销商<span style="margin-left: 10px;">{{all.passCount.inc}}</span></div> -->
            </div>
            <div
              style="width: 295px; height: 160px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 15px; margin-bottom: 15px;"
            >
              <div style="color: rgb(120, 125, 133); font-size: 16px;">生产发货</div>
              <div class="flexbc" style="margin: 10px 0;">
                <div class="flex">
                  <div style="font-size: 40px; margin-right: 10px;">{{all.produceCount.count}}</div>
                  <div style="position: relative; top: 15px;">
                    <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                    <div style="color: rgb(252, 30, 53); font-size: 14px;">+{{all.produceCount.inc}}</div>
                  </div>
                </div>
                <div>
                  <img src="../../../static/img/index8.png" style="width: 60px;" />
                </div>
              </div>
              <!-- <div style="color: rgb(64, 66, 71);">分销商<span style="margin-left: 10px;">{{all.produceCount.inc}}</span></div> -->
            </div>
            <div
              style="width: 295px; height: 160px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 15px; margin-bottom: 15px;"
            >
              <div style="color: rgb(120, 125, 133); font-size: 16px;">生产失败</div>
              <div class="flexbc" style="margin: 10px 0;">
                <div class="flex">
                  <div style="font-size: 40px; margin-right: 10px;">{{all.failCount.count}}</div>
                  <div style="position: relative; top: 15px;">
                    <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                    <div style="color: rgb(252, 30, 53); font-size: 14px;">+{{all.failCount.inc}}</div>
                  </div>
                </div>
                <div>
                  <img src="../../../static/img/index7.png" style="width: 60px;" />
                </div>
              </div>
              <!-- <div style="color: rgb(64, 66, 71);">分销商<span style="margin-left: 10px;">{{all.failCount.inc}}</span></div> -->
            </div>
            <div
              style="width: 300px; height: 160px; background: #fff; border-radius: 20px; padding: 20px;"
            >
              <div style="color: rgb(120, 125, 133); font-size: 16px;">直属分销商</div>
              <div class="flexbc" style="margin: 10px 0;">
                <div class="flex">
                  <div style="font-size: 40px; margin-right: 10px;">{{countt.direct_count}}</div>
                  <!-- <div style="position: relative; top: 15px;">
                    <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                    <div style="color: rgb(252, 30, 53); font-size: 14px;">+100</div>
                  </div>-->
                </div>
                <div>
                  <img src="../../../static/img/index6.png" style="width: 60px;" />
                </div>
              </div>
            </div>
          </div>

          <div class="flex" style="margin-top: 0px;">
            <div style="margin-right: 20px; ">
              <div
                style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700; margin-top: 40px;"
                class="flex"
              >
                <div>
                  <img
                    src="../../../static/img/index3.png"
                    style="width: 22px; margin-right: 10px;"
                  />
                </div>
                <div>最近一周订单统计</div>
              </div>
              <div
                style="width: 660px; height: 400px; background: rgb(255, 255, 255); border-radius: 20px;"
              >
                <tu v-if="!shoujiban"></tu>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="系统更新日记"
      :visible.sync="log2"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="800px"
    >
      <div>
        <div style="margin-bottom: 20px;">
          <span style="font-weight: bold; margin-right: 10px;">通知标题:</span>
          {{now.title}}
        </div>
        <div style="margin-bottom: 20px;">
          <span style="font-weight: bold; margin-right: 10px;">版本号:</span>
          {{now.version}}
        </div>
        <div style="margin-bottom: 20px;" v-html="now.content"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log2 = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="log"
      class="dd"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1078px"
    >
      <div style="background: #fff; padding: 40px;">
        <div style="font-size: 36px; margin-bottom: 40px;">小螺号分销业务开门红活动详情</div>
        <div>
          <div style="margin-bottom: 10px;">小螺号正式上线限时享公测期内三个月免订单费，并开启春节专属福利活动！！！</div>
          <div style="margin-bottom: 10px;">
            <b>活动名称：</b>分销业务开门红
          </div>
          <div style="margin-bottom: 10px;">
            <b>活动时间：</b>商家在注册开通小螺号系统后的一个月内
          </div>
          <div style="margin-bottom: 30px;">
            <b>活动内容：</b>商户注册开通小螺号分销系统发展自己的分销业务，在首月达到相应的订单数量和分销商数量即可获得奖励权益
          </div>

          <div style="margin-bottom: 10px;">
            <b>奖励条件（二选一）：</b>
          </div>
          <div style="margin-bottom: 10px;">1. 发展有效订单数大于200且分销商不低于20个，可以获得两个月系统免费时长</div>
          <div style="margin-bottom: 10px;">2. 发展有效订单数大于400且分销商不低于50个，可以免费提供一个API对接名额或四个月系统免费时长</div>
          <div style="margin-bottom: 10px;">3. 发展有效订单数大于800且分销商不低于80个，可以免费提供两个API对接名额或六个月系统免费时长</div>
          <div style="margin-bottom: 30px;">注：有效订单指订单发货后且成功激活的数量</div>

          <div style="margin-bottom: 10px;">
            <b>奖励兑换方式:</b>
          </div>
          <div style="margin-bottom: 30px;">商家在满足条件后，可以随时联系敢探号官方客服兑换，我们在核实情况真实性后发放权益。</div>

          <div style="margin-bottom: 10px;">
            <b>活动奖励权益解释：</b>
          </div>
          <div style="margin-bottom: 10px;">1、api接口免费对接：运营商或上游系统的API接口在敢探号系统上为您免费对接。</div>
          <div style="margin-bottom: 40px;">2、小螺号系统免费使用时长：在公测期（3个月）结束后，您可继续免费使用小螺号分销系统的时长。</div>
        </div>
        <div
          @click="log = false"
          style="border-radius: 10px; box-shadow: 0px 10px 20px 0px rgb(163, 207, 255); background: rgb(0, 90, 255); width: 199px; height: 52px; margin: 0 auto; cursor: pointer; line-height: 52px; text-align: center; color: #fff;"
        >关闭</div>
      </div>
    </el-dialog>
    <el-dialog
      title="下载APP"
      :visible.sync="applog"
      width="440px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="qrcode flexcc" ref="qrCodeUrlx" style="margin: 0 auto; max-width: 100%;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="applog = false">关闭</el-button>
        <el-button type="primary" @click="xiazaiapp2">下载</el-button>
      </span>
    </el-dialog>

    <div v-if="shoujiban" style="position:relative">
      <img
        src="../../../static/img/switch_img.png"
        alt
        class="switch_img"
        @click="JumpClick(wailian)"
      />
      <div>
        <mtop></mtop>
        <div class="flexc" style="padding: 0.4rem 0.3rem; background: #fff;">
          <div style="flex: 1; text-align: center;" @click="openwx(wailian)">
            <div class="flexcc">
              <img src="../../../static/mimg/n8.png" style="width: 0.9rem;" />
            </div>
            <div style="font-size: 0.24rem; margin-top: 0.2rem;">销售橱窗</div>
          </div>

          <div style="flex: 1; text-align: center;" @click="show = true">
            <div class="flexcc">
              <img src="../../../static/mimg/n10.png" style="width: 0.9rem;" />
            </div>
            <div style="font-size: 0.24rem; margin-top: 0.2rem;">推广店铺</div>
          </div>
          <div style="flex: 1; text-align: center;" @click="go2('/weixiaodian')">
            <div class="flexcc">
              <img src="../../../static/mimg/n11.png" style="width: 0.9rem;" />
            </div>
            <div style="font-size: 0.24rem; margin-top: 0.2rem;">编辑微小店</div>
          </div>
          <div style="flex: 1; text-align: center;" @click="copy(wailian)">
            <div class="flexcc">
              <img src="../../../static/mimg/n12.png" style="width: 0.9rem;" />
            </div>
            <div style="font-size: 0.24rem; margin-top: 0.2rem;">复制链接</div>
          </div>
        </div>
      </div>
      <div style="padding: 0.3rem 0.3rem 1rem;">
        <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700; " class="flex">
          <div>
            <img src="../../../static/img/index1.png" style="width: 22px; margin-right: 10px;" />
          </div>
          <div>实时数据</div>
        </div>
        <div class="flexbc">
          <div
            style="width: 3.3rem; background: #fff; border-radius: 0.2rem; padding: 0.2rem; margin-bottom: 15px;"
          >
            <div style="color: rgb(120, 125, 133); font-size: 16px;">提交订单</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div
                  style="font-size: 0.5rem; font-weight: bold; margin-right: 0.2rem;"
                >{{all.allCount.count}}</div>
                <div style="position: relative; top: 0px;">
                  <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                  <div style="color: rgb(252, 30, 53); font-size: 14px;">+{{all.allCount.inc}}</div>
                </div>
              </div>
              <div>
                <img src="../../../static/img/index10.png" style="width: 60px;" />
              </div>
            </div>
            <!-- <div style="color: rgb(64, 66, 71);">分销商<span style="margin-left: 10px;">{{all.allCount.inc}}</span></div> -->
          </div>
          <div
            style="width: 3.3rem; background: #fff; border-radius: 0.2rem; padding: 0.2rem; margin-bottom: 15px;"
          >
            <div style="color: rgb(120, 125, 133); font-size: 16px;">审核通过</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div
                  style="font-size: 0.5rem; font-weight: bold; margin-right: 0.2rem;"
                >{{all.passCount.count}}</div>
                <div style="position: relative; top: 0;">
                  <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                  <div style="color: rgb(252, 30, 53); font-size: 14px;">+{{all.passCount.inc}}</div>
                </div>
              </div>
              <div>
                <img src="../../../static/img/index9.png" style="width: 60px;" />
              </div>
            </div>
            <!-- <div style="color: rgb(64, 66, 71);">分销商<span style="margin-left: 10px;">{{all.passCount.inc}}</span></div> -->
          </div>
          <div
            style="width: 3.3rem; background: #fff; border-radius: 0.2rem; padding: 0.2rem; margin-bottom: 15px;"
          >
            <div style="color: rgb(120, 125, 133); font-size: 16px;">生产发货</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div
                  style="font-size: 0.5rem; font-weight: bold; margin-right: 0.2rem;"
                >{{all.produceCount.count}}</div>
                <div style="position: relative; top: 0;">
                  <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                  <div style="color: rgb(252, 30, 53); font-size: 14px;">+{{all.produceCount.inc}}</div>
                </div>
              </div>
              <div>
                <img src="../../../static/img/index8.png" style="width: 60px;" />
              </div>
            </div>
            <!-- <div style="color: rgb(64, 66, 71);">分销商<span style="margin-left: 10px;">{{all.produceCount.inc}}</span></div> -->
          </div>
          <div
            style="width: 3.3rem; background: #fff; border-radius: 0.2rem; padding: 0.2rem; margin-bottom: 15px;"
          >
            <div style="color: rgb(120, 125, 133); font-size: 16px;">生产失败</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div
                  style="font-size: 0.5rem; font-weight: bold; margin-right: 0.2rem;"
                >{{all.failCount.count}}</div>
                <div style="position: relative; top: 0;">
                  <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                  <div style="color: rgb(252, 30, 53); font-size: 14px;">+{{all.failCount.inc}}</div>
                </div>
              </div>
              <div>
                <img src="../../../static/img/index7.png" style="width: 60px;" />
              </div>
            </div>
            <!-- <div style="color: rgb(64, 66, 71);">分销商<span style="margin-left: 10px;">{{all.failCount.inc}}</span></div> -->
          </div>
          <div style="width: 3.3rem; background: #fff; border-radius: 0.2rem; padding: 0.2rem;">
            <div style="color: rgb(120, 125, 133); font-size: 16px;">直属分销商</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div
                  style="font-size: 0.5rem; font-weight: bold; margin-right: 0.2rem;"
                >{{countt.direct_count}}</div>
                <!-- <div style="position: relative; top: 15px;">
                    <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                    <div style="color: rgb(252, 30, 53); font-size: 14px;">+100</div>
                </div>-->
              </div>
              <div>
                <img src="../../../static/img/index6.png" style="width: 60px;" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="position: fixed; left: 0; bottom: 0; width: 100%; box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.05); background: rgb(255, 255, 255);"
      >
        <mfooter></mfooter>
      </div>
      <van-popup v-model="show" position="center" style="border-radius: 0.5rem;">
        <div style="padding: 0.6rem 0.3rem; text-align: center; width: 6.6rem;">
          <canvas999 ref="canvas999"></canvas999>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import canvas999 from "../geren/zujian/canvas999.vue";
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import tu from "./dialog/yizhou.vue";
import mtop from "../mtop.vue";
import mfooter from "../mfooter.vue";
export default {
  name: "shangpinguanli",
  components: {
    left,
    tu,
    top,
    footers,
    mtop,
    mfooter,
    canvas999
  },
  data() {
    return {
      show: false,
      log2: false,
      now: "",
      all: {
        allCount: "",
        passCount: "",
        produceCount: "",
        failCount: ""
      },
      count: "",
      yizhou: "",
      countt: "",
      tongzhilist: "",
      messagelist: "",
      shoujiban: false,
      wailian: "",
      sys: "",
      applog: false
    };
  },

  created() {
    if (window.screen.width < 1080) {
      this.shoujiban = true;
      var h = document.documentElement.clientWidth / 7.5 + "px";
      document.documentElement.style.fontSize = h;
    }
    this.getinfo();

    axios.get("/api/base/info/get").then(response => {
      if (response.data.msg.code == 0) {
        this.sys = response.data.data;
      } else {
        this.$message.error(response.data.msg.info);
      }
    });
  },

  mounted() {
    axios.get("/agent/auth/user").then(response => {
      if (response.data.msg.code == 0) {
        this.user = response.data.data;
        localStorage.setItem("user", JSON.stringify(response.data.data));
        this.wailian =
          location.origin + "/h5/index?shop_id=" + window.btoa(this.user.id)+'&tab=1';
        if (this.$route.query.open == "1") {
          return;
        }

        // if (this.shoujiban == true) {
        //   location.href = this.wailian;
        // }
        console.log(this.wailian);
      } else {
        vant.Toast(response.data.msg.info);
      }
    });
  },

  methods: {
    // 2024/9/9 添加跳转
    JumpClick: function() {
      location.href = this.wailian;
    },
    //下载app
    xiazaiapp: function() {
      this.applog = true;
      this.$nextTick(() => {
        this.$refs.qrCodeUrlx.innerHTML = "";
        var qrcode = new QRCode(this.$refs.qrCodeUrlx, {
          text: this.sys.app_url + "?attname=", // 需要转换为二维码的内容
          width: 300,
          height: 300,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    xiazaiapp2: function() {
      location.href = this.sys.app_url + "?attname=";
    },

    xiangqing: function(item) {
      this.now = item;
      this.log2 = true;
    },
    go2: function(url) {
      this.$router.push(
        `/weixiaodian?shop_id=${JSON.parse(localStorage.getItem("user")).id}`
      );
    },
    openwx: function() {
      location.href = this.wailian;
    },
    openw2: function(item) {
      let url =
        location.origin +
        "/h5/index?shop_id=" +
        window.btoa(JSON.parse(localStorage.getItem("user")).id);
      console.log(url);
      window.open(url);
    },
    getinfo: function() {
      axios.get("/agent/order/count").then(response => {
        if (response.data.msg.code == 0) {
          this.all = response.data.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });

      axios.get("/agent/reseller/count").then(response => {
        if (response.data.msg.code == 0) {
          this.countt = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });

      axios.get("/api/sys/version/list?page=1&pageSize=3").then(response => {
        if (response.data.msg.code == 0) {
          this.tongzhilist = response.data.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
      // axios.get('/agent/agent/count').then((response)=>{
      // 	if (response.data.msg.code == 0) {
      //     this.count = response.data.data.count
      // 	} else {
      // 		this.$message.error(response.data.msg.info);
      // 	}
      // })
    }
  }
};
</script>


<style scoped lang="less">
.switch_img {
  position: absolute;
  top: 73%;
  width: 1rem;
  height: 1rem;
  right: 0.25rem;
}
</style>
